<template>
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName">
        <el-tab-pane label="单据" name="1"></el-tab-pane>
        <el-tab-pane label="详情" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 1">
      <Bills :optionsData="optionsDataAll" />
    </template>
    <template v-else>
      <Details :optionsData="optionsDataAll" />
    </template>
  </VPage>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import Bills from "./components/bills/index";
import Details from "./components/details/index";
import { useFetchSelect, useEnumSelect } from "@/hooks";
import { logisticsList } from "@/api/index.js";
import { getWarehouseOptions } from "@/api/public";
const activeName = ref("1");
//获取物流商
const optionsData1 = reactive({});
const getlogistics = async () => {
  const { data } = await logisticsList();
  optionsData1.logistics = data || [];
};
getlogistics();
const { options: optionsData } = useEnumSelect({
  params: [
    "finance_settle_type",
    "finance_charge_status",
    "out_prediction_audit_status",
    "out_regulatory_approach"
  ],
});
const getStorehouse = async () => {
  try {
    const res = await getWarehouseOptions({
      status: 1,
    });
    optionsData1.warehouse = res.data;
  } catch (e) {
    console.error(e);
  }
};
getStorehouse();
const optionsDataAll = computed(() =>
  Object.assign({}, optionsData.value, optionsData1)
);
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
